<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">html, body {
        /*background-color: #25272b;*/
        /*background-image: url(body3.jpg);*/
        background-position: 0px 0px;
        background-attachment: fixed;
        /*background-repeat: no-repeat;*/
        background-repeat: no-repeat;
        background-size:100% 100%;
        -webkit-background-size:auto;
        color: #fff;
        font-family: helvetica, arial, sans-serif;
        margin: 0;
        padding: 0;
        font-size: 12pt
    }

    #canvas {
        border: 1px solid #555;
        position: absolute;
        left: 0;
        top: 0;
        width: 360px;
        height: 640px;
        /*background-color: #000*/
    }

    #game {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 360px;
        height: 640px
    }

    #nocanvas {
        width: 360px;
        margin: 150px auto
    }

    a {
        color: #06c
    }

    img {
        border: 0
    }

    .made-with-impact {
        position: absolute;
        text-align: center;
        bottom: 32px;
        right: 32px
    }


    </style>

</head>
<body>
<div id="game">
    <canvas style="cursor: auto;" height="640" width="360" id="canvas">
        <div id="nocanvas"> 想玩这款游戏？你需要有个不错的浏览器，比如
            <a href="http://www.google.com/chrome">谷歌浏览器</a>,
            <a href="http://www.mozilla.com/firefox/">火狐浏览器</a>， <a href="http://www.opera.com/">Opera浏览器</a>, 或
            <a href="http://www.apple.com/safari/">Safari浏览器</a>.
        </div>
    </canvas>
</div>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
    var c = document.getElementById('canvas');
    var ctx = c.getContext('2d');

    function drawObj(f){
        var x = 150;
        var y = 0;
        var w = 20;
        var h = 20;

        setInterval(function(){
            ctx.clearRect(x,y,w, h);
            ctx.fillStyle = '#BB445C';
//            ctx.shadowBlur = 10;
//            ctx.shadowColor = 'blue';
//            ctx.fillStyle = 'red';
//            ctx.strokeStyle = 'yellow';
            ctx.size = 12;

            //飞机抵达左右边框时，改变飞机横向移动的方向
            if(x > c.width -20 || x < 20){
                f *= -1;
            }
            //随机改变飞机的横向移动方向
            if(x % 20 === 0 && Math.ceil(Math.random()*100) > 70){
                f *= -1;
            }
            x = x + f*2;
            y = y + 2;
            //飞机抵达底部时,移除该飞机对象
            if(y > c.height-200){
                ctx.clearRect(x,y,w, h);
                y = 0;
            }else{
                ctx.fillRect(x,y,w,h);
            }
        },200);


//        while(true){
//            var f = 1;//方向
//            var randomValue = Math.ceil(Math.random()*100);
//            if(randomValue > 50){
//                f = -1
//            }else{
//                f = 1;
//            }
//            drawObj(f);
//        }
    }

    setInterval(function(){
                var f = 1;//方向
                var randomValue = Math.ceil(Math.random()*100);
                if(randomValue > 50){
                    f = -1
                }else{
                    f = 1;
                }
                drawObj(f);
            },2000);





</script>
</html>